<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>知识讲解</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: #1c023f;
        color: white;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }

      .header,
      .footer,
      .search-container {
        max-width: 100%;
        box-sizing: border-box;
      }

      * {
        box-sizing: border-box;
      }

      .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background-color: #1c023f;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-top: auto;
        z-index: 1000;
      }

      .header {
        display: flex;
        height: 90px;
        width: 100%;
        background-color: #1c023f;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
      }

      .header h1,
      .header p {
        margin: 0;
      }

      .search-container {
        margin: 10px 20px;
        margin-top: 30px;
        display: flex;
        align-items: center;
      }

      .search-bar {
        background: #392f5a;
        border-radius: 10px;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 500px;
        position: relative;
      }

      .search-input {
        background: transparent;
        border: none;
        color: white;
        outline: none;
        flex: 1;
        margin-left: 10px;
        padding: 5px;
      }

      .search-button {
        background: rgba(107, 85, 180, 0.3);
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        padding: 5px 15px;
        margin-left: 10px;
        transition: background-color 0.3s;
      }

      .search-button:hover {
        background: #4a3f8c;
      }

      .button {
        background: rgb(141 115 176 / 10%);
        opacity: 0.6;
        border: none;
        border-radius: 10px;
        color: white;
        padding: 12px;
        text-align: center;
        margin: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 80%;
        height: 50px;
        /* 设置按钮的固定高度 */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
      }

      .button:hover {
        background: #5b4aa3;
      }

      .footer svg {
        color: white;
        font-size: 24px;
      }

      .back-btn,
      .location-btn,
      .calendar-btn,
      .moon-btn,
      .data-btn,
      .index-btn {
        margin-right: 10px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: opacity 0.3s;
      }

      .back-btn:hover,
      .location-btn:hover,
      .calendar-btn:hover,
      .moon-btn:hover,
      .data-btn:hover,
      .index-btn:hover {
        opacity: 0.8;
      }

      .location-info {
        flex-grow: 1;
        text-align: right;
        padding: 30px;
      }

      .location-info h1,
      .location-info p {
        margin: 0;
      }

      .button-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        overflow-y: auto;
        max-height: calc(100vh - 250px);
        padding: 10px;
        margin-bottom: 80px;
        font-size: large;
      }

      .content {
        padding: 20px;
        background: #0a0a0a;
        border-radius: 10px;
        margin: 20px auto;
        color: white;
        max-width: 580px;
        width: 100%;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <button class="back-btn" onclick="window.location.href='newdata.html'">
        <img
          src="{{ url_for('static', filename='素材/left.png') }}"
          alt="Back"
        />
      </button>
      <div class="location-info">
        <h4 id="location-name">北京</h4>
        <p id="coordinates">116.4074°E 39.9042°N</p>
      </div>
      <button
        class="location-btn"
        onclick="window.location.href='direction.html'"
      >
        <img
          src="{{ url_for('static', filename='素材/箭头.png') }}"
          alt="Location"
        />
      </button>
    </div>

    <div id="search-container" class="search-container">
      <div class="search-bar">
        <img
          src="{{ url_for('static', filename='素材/搜索.png') }}"
          alt="搜索图标"
          style="margin-right: 10px"
        />
        <input
          type="text"
          class="search-input"
          placeholder="输入关键词"
          id="search-input"
        />
        <button class="search-button" onclick="performSearch()">搜索</button>
      </div>
    </div>

    <div id="button-list" class="button-list">
      <!-- 按钮列表将在这里生成 -->
    </div>

    <div id="content" class="content" style="display: none">
      <!-- 内容将在这里显示 -->
    </div>

    <div class="footer">
      <button
        class="calendar-btn"
        onclick="window.location.href='newcalendar.html'"
      >
        <img
          src="{{ url_for('static', filename='素材/日历浅色.png') }}"
          alt="calendar"
        />
      </button>
      <button class="moon-btn" onclick="window.location.href='十二宫图.html'">
        <img
          src="{{ url_for('static', filename='素材/可视化浅色.png') }}"
          alt="moon"
        />
      </button>
      <button class="data-btn" onclick="window.location.href='newdata.html'">
        <img
          src="{{ url_for('static', filename='素材/知识深色.png') }}"
          alt="data"
        />
      </button>
      <button class="index-btn" onclick="window.location.href='newai.html'">
        <img
          src="{{ url_for('static', filename='素材/大模型.png') }}"
          alt="index"
        />
      </button>
    </div>

    <script>
      window.onload = function () {
        if (
          localStorage.getItem("locationName") &&
          localStorage.getItem("coordinates")
        ) {
          document.getElementById("location-name").innerText =
            localStorage.getItem("locationName");
          document.getElementById("coordinates").innerText =
            localStorage.getItem("coordinates");
        }
      };
      const topics = [
        "“萨雄”- 藏历的计算工具",
        "“图珠”- 藏历的测影圭表",
        "藏历与农历",
        "藏历的纪年方法",
        "藏历的纪月方法",
        "藏历的纪日方法",
        "藏历的纪时方法",
        "历算五支即五要素",
        "五星运动",
        "闰月的设置",
        "缺日和重日",
        "六历对照银巴万年历说明",
        "藏历与藏历历书",
        "二十四节气",
        "日月食预报",
        "藏历的流派",
        "三种日的概念",
        "五行和五大（五源）学说",
        "2025满月日历",
        "2025年罕见天文事件",
        "2025年天文事件日历",
        "2025年彗星时间表",
        "2025年春分",
        "二十八（七）星宿",
        "宫年与太阳的周年视运动",
        "三种年",
        "三种月",
        "十二宫",
        "十曜",
        "太阳日与太阳的周日视运动",
        "太阴月与月亮视运动",
      ];

      // 主题与 HTML 文件的固定映射
      const topicToFileMap = {
        "“萨雄”- 藏历的计算工具": "/topic1",
        "“图珠”- 藏历的测影圭表": "/topic2",
        藏历与农历: "/topic3",
        藏历的纪年方法: "/topic4",
        藏历的纪月方法: "/topic5",
        藏历的纪日方法: "/topic6",
        藏历的纪时方法: "/topic7",
        历算五支即五要素: "/topic8",
        五星运动: "/topic9",
        闰月的设置: "/topic10",
        缺日和重日: "/topic11",
        六历对照银巴万年历说明: "/topic12",
        藏历与藏历历书: "/topic13",
        二十四节气: "/topic14",
        日月食预报: "/topic15",
        藏历的流派: "/topic16",
        三种日的概念: "/topic17",
        "五行和五大（五源）学说": "/topic18",
        "2025满月日历": "/topic19",
        "2025年罕见天文事件": "/topic20",
        "2025年天文事件日历": "/topic21",
        "2025年彗星时间表": "/topic22",
        "2025年春分": "/topic23",
        "二十八（七）星宿": "/topic24",
        宫年与太阳的周年视运动: "/topic25",
        三种年: "/topic26",
        三种月: "/topic27",
        十二宫: "/topic28",
        十曜: "/topic29",
        太阳日与太阳的周日视运动: "/topic30",
        太阴月与月亮视运动: "/topic31",
      };

      const buttonList = document.getElementById("button-list");
      const contentDiv = document.getElementById("content");
      const searchContainer = document.getElementById("search-container");

      function createButtons(filteredTopics) {
        buttonList.innerHTML = ""; // 清空按钮列表
        filteredTopics.forEach((topic) => {
          const button = document.createElement("button");
          button.className = "button";
          button.textContent = topic;
          button.onclick = () => loadContent(topic);
          buttonList.appendChild(button);
        });
      }

      // 初始创建所有按钮
      createButtons(topics);

      // 搜索功能
      function performSearch() {
        const input = document.getElementById("search-input");
        const searchTerm = input.value.trim();
        if (searchTerm) {
          const filteredTopics = topics.filter((topic) =>
            topic.includes(searchTerm)
          );
          createButtons(filteredTopics);
        } else {
          createButtons(topics);
        }
      }
      document
        .getElementById("search-input")
        .addEventListener("keypress", function (e) {
          if (e.key === "Enter") {
            performSearch();
          }
        });

      function loadContent(topic) {
        const topicUrl = topicToFileMap[topic];
        if (!topicUrl) {
          contentDiv.innerHTML = "未找到相关内容";
          contentDiv.style.display = "block";
          return;
        }

        // 使用 AJAX 请求获取内容
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              contentDiv.innerHTML = xhr.responseText;
              contentDiv.style.display = "block";
              buttonList.style.display = "none";
              searchContainer.style.display = "none";
            } else {
              contentDiv.innerHTML = "内容加载失败，请稍后再试。";
              contentDiv.style.display = "block";
            }
          }
        };
        xhr.open("GET", topicUrl, true);
        xhr.send();
      }
    </script>
  </body>
</html>
